<script setup lang="ts">
import Echarts from "@/components/echartsTemplate/index.vue";
import { onMounted, reactive } from "vue";
import { fetchGetPersonSex } from '@/api/screen/person'


const dataList = reactive([
  { value: null, name: '男生' },
  { value: null, name: '女生' },
])
onMounted(() => {
  getGetPersonSex()
})
// 获取学院数据
const getGetPersonSex = async () => {
  const res = await fetchGetPersonSex()
  dataList[0].value = res.data.boy
  dataList[1].value = res.data.girl
}


const option = reactive({
  legend: {
    right: '70',
    textStyle: {
      // 图例文字的样式
      color: '#fff',
      fontSize: 14,
      padding: [2, 0, 0, 2],
      fontWeight: 100,
    },
  },
  tooltip: {
    trigger: 'item',

  },
  series: [
    {
      type: 'pie',
      color: ['#358172', '#c3dcd6'],
      radius: '70%',
      left: 'center',
      data: dataList,
      label: {
        normal: {
          show: true,
          position: 'inside',
          formatter: "{b}\n-------------\n{d}%\t{c}",
          rich: {
            value: {
              fontSize: 24,
              color: '#ffffff',
            },
          },
        }
      },
    },
  ],
});
</script>
<template>
  <div class="ringDiagram">
    <Echarts :option="option"></Echarts>
  </div>
</template>



<style scoped lang="scss">
.ringDiagram {
  height: 100%;
}
</style>
